<template>
  <div class="home">
      <topheader :title="address.city">
      </topheader>
      <nav class="nav_menu">
        <a href="javascript:;" class="menu_item">
            <i class="iconfont icon-meishi"></i>
            <span>美食</span>
        </a>
        <a href="javascript:;" class="menu_item">
            <i class="iconfont icon-xingzhuang"></i>
            <span>电影</span>
        </a>
        <a href="javascript:;" class="menu_item">
            <i class="iconfont icon-mayishangchengdaizhifudengicon18"></i>
            <span>酒店</span>
        </a>
        <a href="javascript:;" class="menu_item">
            <i class="iconfont icon-waimai1"></i>
            <span>外卖</span>
        </a>
        <a href="javascript:;" class="menu_item">
            <i class="iconfont icon-ktv"></i>
            <span>KTV</span>
        </a>
        <a href="javascript:;" class="menu_item">
            <i class="iconfont icon-liren"></i>
            <span>丽人</span>
        </a>
        <a href="javascript:;" class="menu_item">
            <i class="iconfont icon-xiuxian"></i>
            <span>休闲</span>
        </a>
        <a href="javascript:;" class="menu_item">
            <i class="iconfont icon-zhoubianyou1"></i>
            <span>周边游</span>
        </a>
        <a href="javascript:;" class="menu_item">
            <i class="iconfont icon-jianqu"></i>
            <span>小吃</span>
        </a>
        <a href="javascript:;" class="menu_item">
            <i class="iconfont icon-icon-category"></i>
            <span>分类</span>
        </a>
      </nav>
      <div class="like_mode">
        <div class="mode_title">
          猜你喜欢
        </div>
        <shoplist></shoplist>
      </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import TopHeader from "../components/TopHeader";
import ShopList from "../components/ShopList";
export default {
  name: 'Home',
  components: {
    topheader:TopHeader,
    shoplist:ShopList
  },
  mounted(){
    this.$store.dispatch('getShops')
    this.$store.dispatch('getAddress')
  },
  computed: {
    ...mapState(['address'])
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "../assets/stylus/mixin.styl" 
.home
  background #f5f5f5
  margin-bottom 2.8rem
  .nav_menu
    display flex
    flex-wrap wrap
    padding 0.8rem 0
    background #fff
    .menu_item
      width 20%
      display flex
      flex-direction column
      justify-content center
      align-items center
      font-size 1rem
      color  #41B883
      padding 0.4rem 0
      .iconfont
        font-size 2.4rem
      span
        padding-top 0.2rem
        color #757575
    .menu_item:nth-of-type(1)
      color #FE8C00
    .menu_item:nth-of-type(2)
      color #ff6767
    .menu_item:nth-of-type(3)
      color #8a90fa
    .menu_item:nth-of-type(4)
      color #fed030
    .menu_item:nth-of-type(5)
      color #f5A100
    .menu_item:nth-of-type(6)
      color #ff80c2
    .menu_item:nth-of-type(7)
      color #4dc6ee
    .menu_item:nth-of-type(8)
      color #16C2C2
    .menu_item:nth-of-type(9)
      color #0084FF
    .menu_item:nth-of-type(10)
      color #00d3be
  .like_mode
    margin-top 1rem
    padding 0 0.4rem
    background #fff
    .mode_title
      bottom-border-1px(#e4e4e4)
      height 2rem
      line-height 2rem
    
          
</style>